<template>
  <div class="AttractInvestment">
    <!--banner-->
    <div class="banner">
      <div class="wh-1200 auto banner-txt pt-50">
        <h1>金融信贷</h1>
        <span>Finance Credit</span>
      </div>
    </div>


    <div class="content-box ml-50 mr-50  pb-100 ">
      <!-- 导航栏开始 -->
      <breadcrumb style="width: 100%;" SecondcrumbsUrl="/AttractInvestment" :ThreecrumbsTitle="Merchantsinfo.title"
        SecondcrumbsTitle="金融信贷">
      </breadcrumb>
      <div class="content-box-area">
        <!-- 导航栏结束 -->
        <div class="main  " style="margin: unset;flex:3">



          <div class="content-txt p-r">
            <div class="main-header ">
              信贷详情
            </div>
            <div class="content-title  mt-50">
              <h1>{{ Info.title }}</h1>
              <div class="bar pb-24">
                <span class="date">发布时间：{{ Info.createTime }}</span>
                <span class="source pl-24"> 来源：{{ Info.source }}</span>
              </div>
            </div>

            <!-- <div class="img-box mr-20 mb-40 f-left">
              <img v-if="Merchantsinfo.cover" :src="Merchantsinfo.cover" alt="">
            </div> -->
            <div>
              <a-descriptions title="" bordered :column="1">
                <a-descriptions-item label="发布机构">
                  {{ companyInfo.name }}
                </a-descriptions-item>
                <a-descriptions-item label="服务名称">
                  {{ Merchantsinfo.name }}
                </a-descriptions-item>

                <a-descriptions-item label="服务类型">
                  <a-tag color="green">{{
                    getDictLabel(Merchantsinfo.type, prodcutTypes) }}</a-tag>
                  <!-- {{ Merchantsinfo.type }} -->
                </a-descriptions-item>
                <a-descriptions-item label="贷款方式">
                  <a-tag color="blue">{{
                    getDictLabel(Merchantsinfo.loanType, loanTypes) }}</a-tag>
                  <!-- {{ Merchantsinfo.loanType }} -->
                </a-descriptions-item>
                <a-descriptions-item label="融资期限">
                  {{ Merchantsinfo.financingTerm }}期
                </a-descriptions-item>
                <a-descriptions-item label="服务概述">
                  {{ Merchantsinfo.desc }}
                </a-descriptions-item>
                <a-descriptions-item label="参考利率">
                  {{ Merchantsinfo.rate }}%
                </a-descriptions-item>
                <!-- <a-descriptions-item label="机构名称">
                {{ Merchantsinfo.pubInstitution }}
              </a-descriptions-item> -->
                <a-descriptions-item label="服务链接">
                  <a target="_blank" :href="'http://' + Merchantsinfo.linkAddress">{{ Merchantsinfo.linkAddress }}</a>
                </a-descriptions-item>
                <a-descriptions-item label="申请资料">
                  {{ Merchantsinfo.information }}
                </a-descriptions-item>
                <a-descriptions-item label="融资额度">
                  {{ Merchantsinfo.financingAmount }} 万
                </a-descriptions-item>
                <a-descriptions-item label="服务热线">
                  {{ Merchantsinfo.contactNumber }}
                </a-descriptions-item>
                <!-- <a-descriptions-item label="联系人">
                  {{ Merchantsinfo.contact }}
                </a-descriptions-item>
                <a-descriptions-item label="截止日期">
                  <span style="color:#08f">{{ Merchantsinfo.closeDate }}</span>
                </a-descriptions-item> -->
                <a-descriptions-item label="服务介绍">
                  <div v-html="Merchantsinfo.productDetails"></div>
                </a-descriptions-item>
              </a-descriptions>
            </div>
            <div class="btn-box">
              <!-- 跳转到填写资料页面 -->
              <a-button type="primary" @click="handleApply">立即申请</a-button>

            </div>
          </div>
        </div>
        <!-- 右侧栏 -->
        <div class="main wh-400 ml-20">
          <div class="content-txt" style="text-align: center;padding:0 0 20px 0;overflow: hidden;">
            <div class="area-header">金融机构详情</div>
            <div class="area-title mt-30 mb-20 ">
              {{ companyInfo.name }}
            </div>
            <div class="area-line ml-10 mr-10 mb-20"></div>
            <div>
              <div class="area-txt">
                <span class="area-txt-lable mr-10">网址:</span>
                <span class="area-txt-val">{{ companyInfo.site }}</span>
              </div>
              <div class="area-txt">
                <span class="area-txt-lable mr-10">联系人:</span>
                <span class="area-txt-val">{{ companyInfo.linkMan }}</span>
              </div>
              <div class="area-txt">
                <span class="area-txt-lable mr-10">手机号码:</span>
                <span class="area-txt-val">{{ companyInfo.linkTel }}</span>
              </div>
              <div class="area-txt">
                <span class="area-txt-lable mr-10">邮箱:</span>
                <span class="area-txt-val">{{ companyInfo.email }}</span>
              </div>
              <div class="area-txt">
                <span class="area-txt-lable mr-10">地址:</span>
                <span class="area-txt-val">{{ companyInfo.address }}</span>
              </div>
            </div>
          </div>

          <div class="content-txt mt-40" style="text-align: center;padding:0 0 20px 0;overflow: hidden;">
            <div class="area-header orange">有效时间</div>
            <div class="area-title mt-30 mb-10 mr-20 flex-between">
              <div>
                {{ parseTime(Merchantsinfo.createTime, '{y}-{m}-{d}') }}
              </div>
              <div>
                {{ parseTime(Merchantsinfo.closeDate, '{y}-{m}-{d}') }}
              </div>
            </div>
            <div>
              <a-progress :stroke-color="{
                '0%': '#108ee9',
                '100%': '#87d068',
              }" :percent="percent" />
            </div>

          </div>

        </div>
      </div>


    </div>
  </div>
</template>
<script>
import { getentMerchantsinfo } from "@/apis/EntMerchants";
import contentText from "@/components/contentText";
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { getClientCreInfo } from '@/apis/cre/crePord'
import { getCompaynInfo } from '@/apis/com/company'
import { getDicts } from "@/apis/system";
import { parseTime } from '@/utils/common';
import { isLogin } from '@/utils';
import { getToken, getCookiesUserInfo } from "@/utils/auth";
import { listCreApplication } from '@/apis/cre/creApplication'

export default {
  data () {
    return {
      merchantsid: "",
      Merchantsinfo: {},
      loanTypes: [],
      prodcutTypes: [],
      companyInfo: {},
      applyHistory: [],
      myCompanyInfo: {}
    };
  },
  components: {
    contentText,
    breadcrumb
  },
  created () {
    this.merchantsid = this.$route.query.merchantsid;
    this.getentMerchantsinfo();
    this.getProdcutTypes()
    this.getLoanTypes();
    this.myApplyHistory();
    this.getMyCompanyInfo()

  },
  computed: {
    Info () {
      return {
        title: this.Merchantsinfo.name,
        createTime: this.Merchantsinfo.createTime,
        source: "本站",
        merchantsContent: this.Merchantsinfo.productDetails
      }
    },
    percent () {
      const dateStart = new Date(parseTime(this.Merchantsinfo.createTime, '{y}-{m}-{d}'));
      const dateEnd = new Date(parseTime(this.Merchantsinfo.closeDate, '{y}-{m}-{d}'));
      const currentDate = new Date();

      console.log('--------dateStart', parseTime(dateStart));
      console.log('--------dateEnd', parseTime(dateEnd));
      console.log('--------currentDate', parseTime(currentDate));

      var total = (dateEnd - dateStart) / (1000 * 60 * 60 * 24)
      console.log('--------total', total);
      var current = (dateEnd - currentDate) / (1000 * 60 * 60 * 24)
      console.log('--------current', current);

      if (current < 0) {
        return 0
      } else {
        console.log('--------', (total - current) / total * 100);

        return parseInt((total - current) / total * 100)
      }


    },
  },
  methods: {
    parseTime,

    async myApplyHistory () {
      const params = {
        pageNumber: 1,
        pageSize: 1,
        userId: JSON.parse(getCookiesUserInfo()).userId,
        productId: this.merchantsid
      }
      console.log('getCookiesUserInfo', JSON.parse(getCookiesUserInfo()));

      const res = await listCreApplication(params)
      this.applyHistory = res



    },


    async handleApply () {
      // 是否登录
      if (!getToken()) {
        this.$message.warning("您需要先登录再进行该操作。");
        return
      }

      if (this.myCompanyInfo.status == 1) {
        this.$message.warning("您需要先签署承诺函再进行该操作。");
        return
      }

      if (this.myCompanyInfo.approvalSt != 1) {
        this.$message.warning("您的企业需要通过审核后再进行改操作。");
        return
      }

      if (this.applyHistory.code == 200 && this.applyHistory.total > 0) {
        // const current = this.applyHistory.find(item=>item.productId==thism)
        this.$message.warning("您已申请过该产品，请勿重复申请。");
        return
      }
      // 添加申请信息
      this.$router.push({
        path: "/creApply",
        query: {
          id: this.Merchantsinfo.id
        }
      })
    },
    /** 获取贷款类型字典 */
    async getLoanTypes () {
      const { data } = await getDicts("cre_loan_type");
      this.loanTypes = data
    },
    /** 获取信贷产品类型字典 */
    async getProdcutTypes () {
      const { data } = await getDicts("cre_product_type");
      this.prodcutTypes = data
      console.log('this.prodcutTypes', this.prodcutTypes);
    },
    getDictLabel (val, array) {
      const obj = array.find(item => item.dictValue == val)
      if (obj) {
        return obj.dictLabel
      }
      return ''
    },
    toDetail () {
      this.$router.push("/contentDetails");
    },
    toHomePage () {
      this.$router.push("/homePage");
    },
    //获取详情
    async getentMerchantsinfo () {
      // let _params = {
      //   id: this.merchantsid,
      // };
      const res = await getClientCreInfo(this.merchantsid)
      if (res.code == 200) {
        this.Merchantsinfo = res.data;
        console.log(' this.Merchantsinfo', this.Merchantsinfo);

        const company = await getCompaynInfo(this.Merchantsinfo.companyId)
        console.log(' company', company);
        if (company.code == 200) {
          this.companyInfo = company.data
        }
      }
    },
    async getMyCompanyInfo () {
      const res = await getCompaynInfo(JSON.parse(getCookiesUserInfo()).companyId)
      console.log(' res', res);
      if (res.code == 200) {
        this.myCompanyInfo = res.data
      }
    },
  },
};

</script>
<style lang="less" scoped>
.AttractInvestment {
  background-color: @bg-color-f5f;

  .banner {
    background: url("../../../assets/images/attract.png") no-repeat center;
    height: 200px;

    h1 {
      height: 60px;
      line-height: 60px;
      color: rgb(7, 41, 71);
      font-size: @font36;
      font-weight: lighter;
    }

    span {
      font-size: @font36;
      color: rgba(7, 41, 71, 58%);
    }
  }

  .main-title {
    img {
      width: 35px;
      height: 35px;
      margin-right: 16px;
      vertical-align: middle;
      margin-top: -10px;
    }

    span {
      font-family: Microsoft YaHei;
      font-size: @font26;
      line-height: @font26;
      font-weight: 700;
      color: @text-color-303;
    }
  }

  .nav-box {
    margin: 24px 0;
    height: 56px;
    background-color: #ffffff;
    box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
    border-radius: 6px;

    .nav-text {
      line-height: 56px;
      margin-left: 29px;
      font-size: @font16;
      font-weight: normal;
      color: @text-color-606;

      .nav-Detail {
        color: @color-188;
      }
    }
  }
}

.main {
  font-size: @font16;

  .content-txt {
    width: 100%;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
  }

  .content-title {
    background-color: @bg-color-f5f;
    text-align: center;
    // width: 1152px;
    width: 100%;
    margin-bottom: 40px;

    h1 {
      font-size: @font26;
      color: @color-2A5;
      font-weight: bold;
      line-height: 36px;
      padding: 24px;
    }

    .bar {
      color: @text-color-606;
    }
  }

  .txt-box {
    padding: 24px 0;
    font-size: 16px;
    line-height: 28px;
    color: @text-color-606;
  }

}

.img-box {
  width: 100%;
  background-color: #ffffff;
  border: solid 1px #dcdfe6;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 10px solid #fff;
  box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);

  img {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
}

.btn-box {
  width: 100%;
  margin: 30px auto 0;
  text-align: center;

  button {
    width: 200px;
  }
}

.content-box-area {
  display: flex;
  width: 1200px;
  margin: 0 auto;
}

.wh-400 {
  width: 400px;
  flex: 1
}

.wh-1400 {
  width: 1400px !important;

}

.area-header {
  width: 100%;
  height: 50px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  background-color: #2A51BC;
  color: #fff;
  border-radius: 0 0 480px 480px;
  line-height: 50px;
  // transform: translateY(-50%);
  // border-radius: 100%;
}

.area-title {
  text-align: left;
  padding-left: 20px;
}

.area-txt {
  padding: 10px 20px;
  text-align: left;


  .area-txt-lable {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;

  }

  .area-txt-val {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-weight: 700;
  }




}

.orange {
  background-color: rgb(242, 164, 58);
}


.area-line {
  background-color: #e8e8e8;
  height: 1px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

::v-deep .ant-progress-text {
  display: none;
}

.p-r {
  position: relative;
}

.main-header {
  position: absolute;
  width: 200px;
  left: 0;
  top: 0;
  height: 50px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  background-color: #2A51BC;
  color: #fff;
  border-radius: 0 0 600px 0;
  line-height: 50px;

}
</style>